<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input
              placeholder="请输入院线名称"
              class="input-with-select"
              v-model="queryInfo.name"
              clearable
              @clear="getGplineList"
          >
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" @click="getGplineList">搜索</el-button>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="showCinemaGpline">添加院线</el-button>
        </el-col>

      </el-row>
      <el-table :data="gplineList" border stripe>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="院线名称" prop="name"></el-table-column>
        <el-table-column label="一口价" prop="fixedPrice"></el-table-column>
        <el-table-column label="折扣率" prop="rate"></el-table-column>
        <el-table-column label="购票渠道" prop="channelName"></el-table-column>
        <el-table-column label="添加时间" prop="addTime"></el-table-column>
        <el-table-column label="修改时间" prop="modifyTime"></el-table-column>
        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-delete" size="mini" @click="deleteCinemaGpline(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="影厅">
          <template slot-scope="scope">
            <router-link :to="{path:'/cinema/line/hall/list',query:{lineId:scope.row.id}}">设置(<span style="color: red">{{scope.row.hallCnt}}</span>)</router-link>
          </template>
        </el-table-column>
        <el-table-column label="影片级别">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit-outline" size="mini" @click="showMovieLevel(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="顺序" prop="sortNum">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="moveUp(scope.row, scope.$index)"
                :disabled="scope.$index === 0">上移</el-button>
            <el-button
                type="text"
                size="small" style="margin-left:16px"
                @click="moveDown(scope.row, scope.$index)"
                :disabled="getFormLength(scope.$index)" >下移</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo"
        :page-sizes="[5, 10, 20]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <el-dialog title="添加院线" :visible.sync="addDialogVisible" width="54%" @close="addDialogClosed">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="院线名称" prop="name">
          <el-input v-model="addForm.name" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="一口价" prop="fixedPrice">
          <el-input v-model="addForm.fixedPrice" style="width: 90px"></el-input>一口价的优先级高于折扣率
        </el-form-item>
        <el-form-item label="折扣率" prop="rate">
          <el-input v-model="addForm.rate" style="width: 90px"></el-input>%，输入90表示按9折的价格卖给用户
        </el-form-item>
        <el-form-item label="场次价格低于" prop="rate">
          <el-input v-model="addForm.showLessPrice" style="width: 90px" />，按<el-input v-model="addForm.showLessPriceRate" style="width: 90px" />%，输入90表示按9折的价格卖给用户
        </el-form-item>
        <el-form-item label="购票渠道" prop="batchId">
          <el-select v-model="addForm.channel" placeholder="请选择" clearable>
            <el-option
                v-for="item in channelList"
                :key="item.channel"
                :label="item.name"
                :value="item.channel">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGpline">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改院线" :visible.sync="editDialogVisible" width="54%" @close="editDialogClosed">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="院线名称" prop="name">
          <el-input v-model="editForm.name" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="一口价" prop="fixedPrice">
          <el-input v-model="editForm.fixedPrice" style="width: 90px"></el-input>一口价的优先级高于折扣率
        </el-form-item>
        <el-form-item label="折扣率" prop="rate">
          <el-input v-model="editForm.rate" style="width: 90px"></el-input>%，输入90表示按9折的价格卖给用户
        </el-form-item>
        <el-form-item label="场次价格低于" prop="rate">
          <el-input v-model="editForm.showLessPrice" style="width: 90px" />，按<el-input v-model="editForm.showLessPriceRate" style="width: 90px" />%，输入90表示按9折的价格卖给用户
        </el-form-item>
        <el-form-item label="购票渠道" prop="batchId">
          <el-select v-model="editForm.channel" placeholder="请选择" clearable>
            <el-option
                v-for="item in channelList"
                :key="item.channel"
                :label="item.name"
                :value="item.channel">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editGpline">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="电影级别" :visible.sync="levelDialogVisible" width="54%" @close="levelDialogVisible = false">
      <el-table :data="cinemaLevelRateList" border stripe>
        <el-table-column label="级别" prop="level"></el-table-column>
        <el-table-column label="一口价" prop="fixedPrice">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fixedPrice" class="form_ipt"  style="width:90px;"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="折扣率" prop="rate">
          <template slot-scope="scope">
            <el-input v-model="scope.row.rate" class="form_ipt" style="width:90px;"></el-input>%
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="addTime"></el-table-column>
        <el-table-column label="修改时间" prop="modifyTime"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="levelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCinemaGplineLevel">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from '@/api/Movie.js'
import Util from '@/libs/utils'
export default {
  data() {
    return {
      queryInfo: {
        pageNo: 1, // 页码
        pageSize: 20, // 页大小
        name:''
      },
      gplineList: [],
      channelList: [],
      cinemaLevelRateList:[],
      total: 0,
      addDialogVisible: false,
      levelDialogVisible: false,
      addForm: {
        name: '',
        rate: '',
        channel:''
      },
      //校验规则
      addFormRules: {
        name: [
          { required: true, message: '请输入院线名称', trigger: 'blur' },
          {
            min: 2,
            max: 30,
            message: '长度在 2 到 30 个字符',
            trigger: 'blur',
          },
        ]
      },
      // 修改对话框的显示或隐藏
      editDialogVisible: false,
      editForm: {},
      editFormRules: {
        name: [
          { required: true, message: '请输入院线名称', trigger: 'blur' },
          {
            min: 2,
            max: 30,
            message: '长度在 2 到 30 个字符',
            trigger: 'blur',
          },
        ]
      }
    }
  },
  created() {
    this.getGplineList()
    this.getMovieChannelSortList();
  },
  methods: {
    showCinemaGpline() {
      this.addDialogVisible = true;
      this.getGplineList();
    },
    showMovieLevel(lineId) {
      this.levelDialogVisible = true;
      this.getCinemaGplineLevelList(lineId);
    },
    getGplineList() {
        Api.getCinemaGplineList(this.queryInfo).then(res => {
            if (res.success) {
                this.gplineList = res.data;
            } else {
                return this.$message.error('获取数据失败')
            }
        })
    },
    getCinemaGplineLevelList(lineId) {
      Api.getCinemaGplineLevelList({'lineId':lineId}).then(res => {
        if (res.success) {
          this.cinemaLevelRateList = res.data;
        } else {
          return this.$message.error('获取数据失败')
        }
      })
    },
    saveCinemaGplineLevel() {
      Api.saveCinemaGplineLevel(this.cinemaLevelRateList).then(res => {
        if (res.success) {
          return this.$message.success('保存成功')
        } else {
          return this.$message.error('获取数据失败')
        }
      })
    },
    getMovieChannelSortList() {
      Api.getMovieChannelSortList(this.queryInfo).then(res => {
        if (res.success) {
          this.channelList = res.data
        } else {
          return this.$message.error('获取渠道类别失败')
        }
      })
    },
    deleteCinemaGpline(id) {
      this.$confirm('确定要删除该院线吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        Api.deleteCinemaGpline({'id': id}).then(res => {
          if (res.success) {
            this.getGplineList();
          } else {
            return this.$message.error('获取数据失败')
          }
        }).catch(() => {
          //this.$message.info('已取消删除')
        })
      })
    },

    moveUp(item, index) {
      this.gplineList.splice(index - 1, 0, item);  // 定位到点击位置的上一行，0即不删除如何元素，在此位置插入item
      this.gplineList.splice(index + 1, 1); // 此时数组中有重复元素，把原来被挤下去的元素删除
      this.setMoveUpAndDown();
    },
    // 下移
    moveDown(item, index) {
      this.gplineList.splice(index + 2, 0, item);
      this.gplineList.splice(index, 1);
      this.setMoveUpAndDown();
    },
    getFormLength(index) {
      if (index === this.gplineList.length - 1) return true;
      else return false;
    },
    setMoveUpAndDown() {
      var ids = "";
      for( let i of this.gplineList){
        ids = ids.concat(i.id, ",");
      }
      ids = ids.substr(0,ids.length-1);
      Api.setUpAndDown({'ids':ids}).then(res => {
        if (res.success) {
        } else {
          return this.$message.error('设置失败')
        }
      })
    },
    // 监听pagesize改变的事件
    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize
      this.getGplineList()
    },
    handleCurrentChange(pageNo) {
      this.queryInfo.pageNo = pageNo
      this.getGplineList()
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    // 添加
    addGpline() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        Api.saveCinemaGpline(this.addForm).then(res => {
            if (res.success) {
              this.addDialogVisible = false
              this.getGplineList()
              this.$message.success('添加成功')
            } else {
                return this.$message.error('添加失败: ' + res.msg)
            }
        })
      })
    },
    async showEditDialog(id) {
      Api.getCinemaGpline({'id':id}).then(res => {
            if (res.success) {
              this.editForm = res.data
              this.editDialogVisible = true
            } else {
              return this.$message.error('查询失败')
            }
        })
    },
    // 修改
    editGpline() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) {
          return
        }
        Api.saveCinemaGpline(this.editForm).then(res => {
            if (res.success) {
              this.editDialogVisible = false
              this.getGplineList()
              this.$message.success('修改成功！')
            } else {
                return this.$message.error('修改失败: ' + res.msg)
            }
        })
      })
    },
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    }
  },
}
</script>

<style lang="less" scoped>
</style>
